<template>
  <view class="goods_list">
    <ugo-search></ugo-search>
    <u-tabs
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
      :bar-width="180"
      active-color="#eb4450"
      :active-item-style="{ color: '#3D3D3D' }"
    ></u-tabs>

    <!-- <view class="goods" v-if="current === 0"> -->
      <scroll-view  class="goods" v-if="current === 0" scroll-y refresher-enabled @scrolltolower="handleScrolltolower" @refresherrefresh="handleRefresherRefresh" 
      :refresher-triggered="isShowRefresher">
        <navigator
        :url="'/pages/goods_detail/goods_detail?goods_id='+item.goods_id"
          class="goods-item"
          v-for="item in goods"
          :key="item.goods_id"
        >
          <view class="goods-img">
            <u-image
              width="191rpx"
              height="191rpx"
              :src="item.goods_small_logo"
            ></u-image>
          </view>
          <view class="goods-info">
            <view class="goods-name u-line-2">{{ item.goods_name }}</view>
            <view class="goods-price"
              ><text>￥</text>{{ item.goods_price }}</view
            >
          </view>
        </navigator>
      </scroll-view>
    <!-- </view> -->

    <view v-if="current === 1">销量</view>
    <view v-if="current === 2">价格</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      goods: [],
      param: {
        query: "",
        cid: "",
        pagenum: 1,
        pagesize: 20,
      },
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      current: 0,
      total: 0,
      isShowRefresher:false
    };
  },
  onLoad(option) {
    // console.log(option)
    const id = option.id || 5;
    this.param.cid = id;

    this.getGoods();
  },
  methods: {
    // 局部下拉刷新
   async handleRefresherRefresh(){
      // console.log("下拉")
      this.isShowRefresher=true

      this.goods=[]
      this.param.pagenum=1
     await this.getGoods()

      this.isShowRefresher=false
    },
    //局部滚动到底部
    handleScrolltolower() {
      // console.log("滚动到底部");
      if(this.goods.length>=this.total){
          uni.showToast({
            title:'没有更多了',
            icon:'none'
          })
          return
        }
        this.param.pagenum++
        this.getGoods()
    },
    change(index) {
      this.current = index;
    },
    async getGoods() {
      let res = await this.$u.get("/goods/search", this.param);
      // console.log(res)
      this.goods = [...this.goods, ...res.message.goods];

      this.total = res.message.total;
    },
  },
  //   // 页面下拉刷新
  //  async onPullDownRefresh(){
  //     // console.log("下拉")
  //     this.goods=[]
  //     this.param.pagenum=1
  //    await this.getGoods()
  //    uni.stopPullDownRefresh()
  //   },
  //      // 页面上拉加载
  //      onReachBottom(){
  //       //  console.log("上拉")
  //       // console.log(this.goods.length)
  //       if(this.goods.length>=this.total){
  //         uni.showToast({
  //           title:'没有更多了',
  //           icon:'none'
  //         })
  //         return
  //       }
  //       this.param.pagenum++
  //       this.getGoods()
  //      }
};
</script>

<style lang="scss" scoped>
.goods_list {
  display: flex;
  height: 100vh;
  flex-direction: column;
  // overflow: hidden;
}
.goods {
  flex: 1;
  overflow: auto;
  navigator.goods-item {
    padding-left: 41rpx;
    display: flex;
    // .goods-img {
      // width: 232rpx;
    // }

    .goods-info {
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      padding-left: 30rpx;
      padding:0 26rpx 0 30rpx;
      .goods-name {
        font-size: 24rpx;
        color: #434343;
      }

      .goods-price {
        color: $theme-color;
        font-size: 24rpx;
        text {
          font-size: 18rpx;
        }
      }
    }
  }
}
</style>